<template>
  <el-dialog
    :modelValue="dialogVisible"
    :title="action === 'add' ? '新增角色' : '编辑角色'"
    width="30%"
    draggable
    :before-close="handleClose"
  >
    <el-form
      :model="roleFormData"
      label-width="80px"
      label-position="right"
      class="form"
      :rules="rules"
      ref="roleFormRef"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleFormData.name" />
      </el-form-item>
      <el-form-item label="权限字符" prop="description">
        <el-input v-model="roleFormData.description" />
      </el-form-item>
      <el-form-item label="显示顺序" prop="roleSort">
        <el-input-number
          v-model="roleFormData.roleSort"
          :min="0"
          :max="10"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="启用" prop="enable">
        <el-switch v-model="roleFormData.enable" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="btn-footer">
      <el-button @click="handleCancel()">取消</el-button>
      <el-button type="primary" @click="onSubmit()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const props = defineProps({
  dialogVisible: Boolean,
  action: String,
  rowInfo: Object,
});

// 表单数据绑定
const roleFormData = ref({
  id: "",
  name: "",
  description: "",
  roleSort: "",
  enable: false,
});

const rules = ref({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  description: [{ required: true, message: "请输入权限字符", trigger: "blur" }],
  roleSort: [{ required: true, message: "请输入显示顺序", trigger: "blur" }],
  enable: [{ required: true, message: "请选择是否启用", trigger: "blur" }],
});

//  重置查询
const config = reactive({
  total: 0,
  page: 1,
  size: 10,
  roleName: "",
});
const emits = defineEmits(["CloseDialog", "resetGetRoleData"]);
// 弹框关闭按钮X掉触发
const handleClose = (done) => {
  ElMessageBox.confirm("确定关闭吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      proxy.$refs.roleFormRef.resetFields();
      //   关闭对话框
      emits("CloseDialog");
      done();
    })
    .catch(() => {
      // catch error
    });
};

//监听父组件传来的表格行数据
watch(
  () => props.rowInfo,
  (newValue) => {
    console.log(
      "%c [ newValue ]-74",
      "font-size:13px; background:pink; color:#bf2c9f;",
      newValue
    );
    if ((newValue != undefined) | (newValue != null)) {
      roleFormData.value = {
        id: newValue.id,
        name: newValue.name,
        description: newValue.description,
        roleSort: newValue.roleSort,
        enable: newValue.enable,
      };
    } else {
      roleFormData.value = {
        id: "",
        name: "",
        description: "",
        roleSort: "",
        enable: false,
      };
    }
  }
);

//提交表单内容
const onSubmit = () => {
  // 表单内容验证，表单的ref属性拿到表单，使用el-api校验
  proxy.$refs.roleFormRef.validate(async (valid) => {
    if (valid) {
      if (props.action === "add") {
        console.log("jinruadd");
        let formAdd = reactive({
          name: roleFormData.value.name,
          description: roleFormData.value.description,
          roleSort: roleFormData.value.roleSort,
          enable: roleFormData.value.enable === true ? 1 : 0,
          createBy: localStorage.getItem("username"),
        });
        // await只会返回给他最近的async回调函数！！！否则报错
        const res = await proxy.$api.role.addRole(formAdd);
        // 如果成功，则清空form表单，并关闭弹框
        if (res) {
          //拿到form表单的ref，使用form自带的清空表单api，ep提供
          //需要注意的是：使用validate、resetFields，需要在表单内容上加prop绑定表单相应属性才会生效
          proxy.$refs.roleFormRef.resetFields();
          //   关闭对话框
          emits("CloseDialog");
          ElMessage({
            showClose: true,
            message: res.data,
            type: "success",
          });
          // 重新获取数据
          emits("resetGetRoleData");
        }
        // 编辑用户信息
      } else if (props.action === "edit") {
        let formEdit = reactive({
          id: roleFormData.value.id,
          name: roleFormData.value.name,
          description: roleFormData.value.description,
          roleSort: roleFormData.value.roleSort,
          enable: roleFormData.value.enable === true ? 1 : 0,
        });
        const res = await proxy.$api.role.updateRoleData(formEdit);
        if (res) {
          proxy.$refs.roleFormRef.resetFields();
          //   关闭对话框
          emits("CloseDialog");
          ElMessage({
            showClose: true,
            message: res.data,
            type: "success",
          });
          // 重新获取数据
          emits("resetGetRoleData");
        }
      }
    } else {
      ElMessage.error("请填写完整信息");
    }
  });
};

// 表单取消时也需要重置表单内容
const handleCancel = () => {
  proxy.$refs.roleFormRef.resetFields();
  resetFormData();
  console.log("from", roleFormData.value);
  emits("CloseDialog");
};

// 清空表单数据，防止表单缓存与点击新增时回显数据
const resetFormData = () => {
  roleFormData.value = {
    id: "",
    name: "",
    description: "",
    roleSort: "",
    enable: false,
  };
};
</script>

<style lang="less" scoped>
// .form {
//   min-height: 250px;
// }
.btn-footer {
  display: flex;
  justify-content: end;
}
</style>
